<template>
	<view class="pages-box rel">
		<view class="radius-20 fill-base use-box pt-sm pb-sm pl-lg pr-lg">
			<view class="h-110 flex-between " :class="[{'b-1px-b':index != useList.length - 1}]" 
			v-for="(item,index) in useList" :key="index" @tap="useChange(index)">
				<text class="f-ms-title text-bold">{{item.title}}</text>
				<i class="iconfont icon-right text-bold" style="color: #C7C7C7;font-size: 13px;"></i>
			</view>
		</view>
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				useList: [
					{id: 1,title: '账号注销',link: '/user/pages/logout'},
				]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updateConfigItem', 'updateUserItem']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			useChange(index){
				let {
					link = ''
				} = this.useList[index]
				if(link){
					this.$util.goUrl({url: link})
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.use-box{
			margin: 20rpx 25rpx;
		}
		.out-btn{
			margin: 20rpx 25rpx 0 25rpx;
		}
	}
</style>
